"use client";
import { Label } from "@/components/ui/label";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import {
  Sheet,
  SheetContent,
  SheetDescription,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
  SheetFooter,
  SheetClose,
} from "@/components/ui/sheet";
import { trpc } from "@/app/_trpc/client";
import { useState } from "react";
import { useToast } from "@/components/ui/use-toast";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { PROJECTS_FLOORS } from "@/helpers/validators";
import Loading from "@/components/Loading";

const CreateFloorSidebar = ({ projectId,projectName }: { projectId: string,projectName:string }) => {
  const [open, setOpen] = useState(false);
  const utils = trpc.useUtils();
  const { toast } = useToast();

  const {
    mutate: createProjectFloor,
    isPending,
    error,
  } = trpc.floor.createProjectFloor.useMutation({
    onSuccess: () => {
      setOpen(false);
      toast({
        title: "Exito",
        description: "Piso creado con exito",
      });
      utils.projects.getProjectById.invalidate({value:projectId});
    },
    onError: (opts) => {
      toast({
        title: "Error!",
        description: opts?.message,
        variant: "destructive",
      });
    },
  });

  const handleCreatePiso = (formData: FormData) => {
    const name = formData.get("name") as string;
    if (!name) return;
    createProjectFloor({ name, projectId,projectName });
  };

  return (
    <Sheet open={open} onOpenChange={setOpen}>
      <SheetTrigger asChild>
        <Button
          variant="outline"
          size="sm"
          className=" rounded-full text-white bg-primary"
        >
          Crear piso
        </Button>
      </SheetTrigger>
      <SheetContent>
        <SheetHeader>
          <SheetTitle>Crear piso</SheetTitle>
          <SheetDescription>
            Define la cantidad de material usados cada dia.
          </SheetDescription>
        </SheetHeader>
        <form action={handleCreatePiso}>
          <div className="grid gap-4 py-4 mt-10">
            <Label className="block">Nombre</Label>

            <Select name="name">
              <SelectTrigger>
                <SelectValue placeholder="Ej: Piso 1" />
              </SelectTrigger>
              <SelectContent>
                {PROJECTS_FLOORS.map((floor) => {
                  return (
                    <SelectItem key={floor} value={floor}>
                      {floor}
                    </SelectItem>
                  );
                })}
              </SelectContent>
            </Select>
          </div>

          <SheetFooter>
            <Button className="" type="submit" disabled={isPending}>
              <span className="mr-2">{isPending ? "Creando" : "Crear"}</span>
              {isPending && <Loading size={15} />}{" "}
            </Button>
          </SheetFooter>
        </form>
      </SheetContent>
    </Sheet>
  );
};

export default CreateFloorSidebar;